import React, { FC, useEffect, useState } from 'react'
import { Form, Input, Button, Spin, Modal } from 'antd'
// import { queryWaitList, queryMoveList } from '~/api/transfer-property-api'
import { queryVoucherCaseList } from '~/api/query-api'
import { getUserInfo } from '~/mock/user/userinfo'

import MoveList from './container/moved-list'
import ItemModal from '~/components/item-modal'

interface QueryListProps {
  caseName?: string
  caseNo?: string
}
const localStorageAuth = JSON.parse(localStorage.getItem('u')!)?.roles[0]
const cacheRecord: any = {}
const Home: FC = () => {
  const [form] = Form.useForm()
  const [moveList, setMoveList] = useState([])
  const { resetFields } = form

  const handleGetQueryMoveList = async (params: QueryListProps) => {
    setVisible(true)
    const userInfo = getUserInfo()
    const { data } = await queryVoucherCaseList({
      ...userInfo,
      caseName: params.caseName === '' ? null : params.caseName,
      caseNo: params.caseNo === '' ? null : params.caseNo
    })
    setMoveList(data)
    setVisible(false)
  }

  const onFinish = (val: any) => {
    console.log('gg', val)
    handleGetQueryMoveList(val)
  }

  const handleInitData = () => {
    if(localStorageAuth==='STOREMAN' ){
      return
    }
    handleGetQueryMoveList({})
  }

  useEffect(() => {
    console.log('666')
    handleInitData()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const [visible, setVisible] = useState(false)
  const [modalVisible, setModalVisible] = useState(false)

  return (
    <div>
      <header>
        <Form validateTrigger="onBlur" layout="inline" form={form} onFinish={onFinish}>
          <Form.Item name="caseNo" label="案件编号：" initialValue={null}>
            <Input placeholder="请输入案件编号搜索" />
          </Form.Item>
          <Form.Item name="caseName" label="案件名称：" initialValue={null}>
            <Input placeholder="请输入案件名称搜索" />
          </Form.Item>
          <Form.Item>
            <Button htmlType="submit" type="primary">
              查询
            </Button>
          </Form.Item>
          <Form.Item>
            <Button
              onClick={() => {
                console.log('reset')
                resetFields()
                handleInitData()
              }}
              style={{ padding: 0 }}
              type="link"
            >
              清空选项
            </Button>
          </Form.Item>
          <Modal
            footer={null}
            width={'max-content'}
            visible={visible}
          >
            <div
              style={{
                display: 'flex',	// 使用flex布局
                position: 'absolute',	// 绝对定位
                top: '0px',	// 距离父级元素顶部0像素
                left: '-100px',	// 距离父级元素左侧0像素
                zIndex: 10,	// 遮罩层的堆叠层级（只要设置的比被遮罩元素高就行）
                height: '100px',	// 与父级元素同高
                width: '250px',	// 与父级元素同宽
                background: 'white',	// 半透明背景
                textAlign: 'center',
                justifyContent: 'space-around',
                alignItems: 'center'
              }}>
              <Spin size={'large'} tip="查询中，请稍候...">
                {/* <Alert message="Alert message title" description="Further details about the context of this alert." type="info" /> */}
              </Spin>
            </div>
            <ItemModal
              visible={modalVisible} setVisible={setModalVisible} record={cacheRecord}
            />
          </Modal>
        </Form>
      </header>
      <main style={{ marginTop: 21 }}>
        <MoveList moveList={moveList} />
      </main>
    </div>
  )
}

export default Home
